<template>
	<view class="content">
		<view class="section-0">
			<view class="section-body">
				<view class="list-container">
					<view class="header">
						<view class="item">序号</view>
						<view class="item">编号</view>
						<view class="item">名称</view>
						<view class="item">操作</view>
					</view>
					<view class="body">
						<view class="row" @click="preview(item.file_path)" v-for="(item, index) in list" :key="index">
							<view class="item">{{ index + 1 }}</view>
							<view class="item">{{ item.number }}</view>
							<view class="item">{{ item.name }}</view>
							<!-- <view class="item" v-if="item.not_count != 0">{{ item.template_name }}({{ item.all_count - item.not_count }}/{{ item.all_count }})</view>
							<view class="item" v-if="item.not_count == 0">{{ item.template_name }}({{ item.all_count }}/{{ item.all_count }})</view> -->
							<view class="item">
								查看
								<!-- <view class="iconfont icon-xiangyou1"></view> -->
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { aMaterIalsDrawingsFile } from '@/api/project_manage.js'
export default {
	data() {
		return {
			id: '',
			list: []
		}
	},
	methods: {
		preview(url) {
			uni.navigateTo({
				url: '/pages/pdf/index?url=' + url
			})
		}
	},
	onLoad(e) {
		// this.id = e.id
		uni.showLoading({ title: '加载中...' })
		aMaterIalsDrawingsFile({ book_id: e.id }).then(obj => {
			if (obj.data.code === 1) {
				this.list = obj.data.data.data
			}
			uni.hideLoading()
		})
	}
}
</script>

<style lang="scss" scoped>
.content {
	background-color: #fafbfd;
	.section-0 {
		width: 100%;
		background-color: #3a5df5;
		.section-body {
			width: 100%;
			background-color: #ffffff;
			background-size: cover;
			background-repeat: no-repeat;
			border-top-left-radius: 50rpx;
			border-top-right-radius: 50rpx;
			overflow: hidden;
			box-sizing: border-box;
			.list-container {
				width: 100%;
				background: #fff;
				border-radius: 35rpx;
				margin-bottom: 65rpx;
				padding-top: 40rpx;
				padding-bottom: 40rpx;
				@include clear();
				position: relative;
				.body {
					margin: 0 auto;
					width: 90%;
					.row {
						width: 100%;
						display: flex;
						border-bottom: solid 2rpx #e2e7f5;
						&:last-child {
							border-bottom: none;
						}
						.item {
							margin-top: 22rpx;
							margin-bottom: 22rpx;
							width: 33.3%;
							text-align: center;
							font-size: 26rpx;
							flex-wrap: wrap;
							font-weight: normal;
							font-stretch: normal;
							letter-spacing: 0rpx;
							color: #3b3c40;
						}
						.item:nth-child(1) {
							width: 20%;
						}
						// .action {
						// 	float: left;
						// 	width: 32rpx;
						// 	margin-left: 35rpx;
						// 	height: 100%;
						// 	line-height: 82rpx;
						// 	text-align: center;
						// 	color: #3b3c40;
						// 	.iconfont {
						// 		font-weight: bold;
						// 		font-size: 32rpx;
						// 		transition: 0.2s ease;
						// 		transform: rotate(90deg);
						// 	}
						// }
					}
				}
				.header {
					margin: 0 auto;
					width: 90%;
					padding: 30rpx 0;
					font-weight: bold;
					border-bottom: solid 2rpx #e2e7f5;
					display: flex;
					.item {
						width: 33.3%;
						text-align: center;
						height: 48rpx;
						line-height: 48rpx;
						font-size: 26rpx;
						font-weight: bold;
						font-stretch: normal;
						letter-spacing: 0rpx;
						color: #3b3c40;
					}
					.item:nth-child(1) {
						width: 20%;
					}
				}
			}
		}
	}
}
</style>
